@function px($value) {
  @return ($value / 75) * 1rem;
}

//单行文本溢出省略号
@mixin ell() {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本溢出省略号
@mixin multiline ($line-num:1) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line-num;
}

// 流布局 $v 水平方向样式 默认center $h垂直方向样式 默认center
@mixin flex($v:center, $h:center) {
  display: flex;
  justify-content: $v;
  align-items: $h;
  // flex-wrap: wrap;
}
// 箭头 方向、大小、颜色
@mixin arrow ($direction, $size, $color, $top, $right) {
  @if $direction == top {
    display :inline-block;
    position: relative;
    width: $size;
    height: $size;
    &:after {
      display: inline-block;
      content: " ";
      height: $size;
      width: $size;
      border-width: 0 1px 1px 0;
      border-color: $color;
      border-style: solid;
      transform-origin: center;
      transition: transform .3s;
      position: absolute;
      top: $top;
      right: $right;
      transform: rotate(-135deg);
    }
  }
  @else if $direction == bottom {
    display :inline-block;
    position: relative;
    width: $size;
    height: $size;
    &:after {
      display: inline-block;
      content: " ";
      height: $size;
      width: $size;
      border-width: 0 1px 1px 0;
      border-color: $color;
      border-style: solid;
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: absolute;
      top: $top;
      right: $right;
    }
  }
  @else if $direction == right {
    display :inline-block;
    position: relative;
    width: $size;
    height: $size;
    &:after {
      display: inline-block;
      content: " ";
      height: $size;
      width: $size;
      border-width: 1px 1px 0 0;
      border-color: $color;
      border-style: solid;
      transform: rotate(45deg);
      position: absolute;
      top: $top;
      right: $right;
    }
  }
  @else if $direction == left {
    display :inline-block;
    position: relative;
    width: $size;
    height: $size;
    &:after {
      display: inline-block;
      content: " ";
      height: $size;
      width: $size;
      border-width: 1px 1px 0 0;
      border-color: $color;
      border-style: solid;
      transform: rotate(-135deg);
      position: absolute;
      top: $top;
      right: $right;
    }
  }

}